import React, {Component} from "react";
import {Card, Form, Modal} from "antd";
import { Link } from 'react-router'
import PropTypes from "prop-types";
import {BtnsTableVED, EditFormNormal, SearchForm, TableContent} from "../../../widgets/index";
import {HTTP, getOrganNo} from "../../../utils";
import {productSpecsList, productSpecsAdd, productSpecsDel} from "../../../utils/api";
import BreadcrumbCustom from "../../../components/BreadcrumbCustom";
const FormItem = Form.Item;

export default class extends Component {

    static contextTypes = {
        router: PropTypes.object
    }

    constructor(props) {
        super(props);
        this.table = undefined
        this.productId = this.props.location.query.productId
        this.productName = this.props.location.query.productName
        this.brandId = this.props.location.query.brandId
        this.brandName = this.props.location.query.brandName
        console.log('productId: ', this.productId, ' productName: ', this.productName)

        this.state = {
            searchParam: {
                productId: this.productId,
                brandId: this.brandId
            },
            formVisible: false,
            formReadOnly: false,
            formInitData: {}
        }
    }

    seaFields = [{
        label: '规格名称',
        key: 'specsName'
    }]

    seaBtns = [{
        label: '新增',
        onClick: () => this.invokeAdd()
    }]

    columns = [{
        title: '规格名称',
        dataIndex: 'specsName',
        key: 'specsName',
    }, {
        title: '规格代码',
        dataIndex: 'specsCode',
        key: 'specsCode',
    }, {
        title: '规格',
        dataIndex: 'specsNum',
        key: 'specsNum'
    }, {
        title: '单位',
        dataIndex: 'specsUnit',
        key: 'specsUnit'
    }, {
        title: '价格',
        dataIndex: 'specsPrice',
        key: 'specsPrice'
    }, {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <BtnsTableVED onView={this.invokeView.bind(this, record)} onEdit={this.invokeEdit.bind(this, record)} onDel={this.invokeDelete.bind(this, record)} />
        ),
    }]

    editFields = [{
        label: '规格名称',
        key: 'specsName',
        required: true,
        requiredMsg: '用户名必填'
    }, {
        label: '规格代码',
        key: 'specsCode'
    }, {
        label: '规格',
        key: 'specsNum'
    }, {
        label: '单位',
        key: 'specsUnit'
    }, {
        label: '价格',
        key: 'specsPrice'
    }]



    render() {
        return (
            <div>
                <BreadcrumbCustom first="产品管理"
                                  second={(<Link to={'/app/erp/product/manager'}>产品列表</Link>)}
                                  third={(<Link to={`/app/erp/product/brandmanager?productId=${this.productId}&productName=${this.productName}`}>{this.productName}</Link>)}
                                  forth={this.brandName}/>
                <Card title="产品管理" bordered={false}>
                    <SearchForm fields={this.seaFields} btns={this.seaBtns} onSearch={this.onSearch}/>
                    <TableContent
                        ref={(e) => {this.table = e}}
                        columns={this.columns}
                        url = {productSpecsList}
                        searchParam={this.state.searchParam}
                    />
                </Card>
                {
                    this.state.formVisible && (
                        <EditFormNormal
                            initData={this.state.formInitData}
                            fields={this.editFields}
                            onClose={() => this.hideForm()}
                            readOnly={this.state.formReadOnly}
                            onSave={this.invokeFormSubmit.bind(this)}
                        />
                    )
                }
            </div>
        )
    }

    onSearch = (values) => {
        this.setState({
            searchParam: Object.assign({}, this.state.searchParam, values)
        }, () => {
            this.table.loadData()
        })
    }

    invokeAdd = () => {
        this.setState({
            formReadOnly: false
        }, () => {
            this.showForm()
        })
    }

    invokeView = (record) => {
        this.setState({
            formReadOnly: true
        }, () => {
            this.showForm(record)
        })
    }

    invokeEdit = (record) => {
        this.setState({
            formReadOnly: false
        }, () => {
            this.showForm(record)
        })
    }

    invokeDelete = (record) => {
        HTTP.post(productSpecsDel, record, () => {}, (resp) => {
            this.table.loadData()
        })
    }

    showForm = (d) => {
        this.setState({
            formVisible: true,
            formInitData: d || {}
        })
    }

    hideForm = () => {
        this.setState({
            formVisible: false,
            formInitData: {}
        })
    }

    invokeFormSubmit(params) {
        params['organNo'] = getOrganNo()
        params['productId'] = this.productId
        params['brandId'] = this.brandId
        HTTP.post(productSpecsAdd, params, () => {}, (resp) => {
            Modal.success({
                title: '提示',
                content: '保存成功'
            })
            this.hideFormSuccess()
            this.table.loadData()
        })
    }

    hideFormSuccess = () => {
        this.setState({
            formVisible: false,
            formInitData: {}
        }, () => {
            this.table.loadData()
        })
    }
}
